<template>
  <div class="OnlineUserCount">
    <span class="renyuan icon gcticons highLight gctrenyuanzaixian"> </span>
    <span @click="goUserOnLine()" class="zhijainzi"> {{ l('OnlineUserCount') }}:</span>

    <span class="highLight">{{ onlineUserCount }} </span>
  </div>
  <div class="menu-search-box">
    <a-select
      name="menu-search"
      :placeholder="l('QuickMenu')"
      :dropdownMatchSelectWidth="false"
      class="menu-search"
      show-search
      allowClear
      @search="handleSearch"
      @change="onSelect"
      v-model:value="selectedValue"
      :filter-option="false"
      :options="list"
      :not-found-content="fetching ? undefined : null"
    >
      <template v-if="fetching" #notFoundContent>
        <a-spin size="small" />
      </template>
    </a-select>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { AppComponentBase, UserServiceProxy } from '/@/shared';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'LayoutMenu',
    mixins: [AppComponentBase],
    components: {
      VNodes: (_, { attrs }) => {
        return attrs.vnodes;
      },
    },
    props: {
      items: {
        type: Array<any>,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        /**
         * 当前在线用户数
         */
        onlineUserCount: 0,
        timer: '',
        selectedValue: null,
        data: [] as any[],
        dropdown: false,
        list: [] as any[],
        placeholder: this.l('Pages.Common.QuickNavigation'),

        dataSource: [] as any[],
        tmpModel: '',
        userSer: new UserServiceProxy(),
        _list: [] as any[],
        router: useRouter(),
        fetching: false,
      };
    },
    beforeUnmount() {
      clearInterval(this.timer as any);
    },
    created() {
      this.scan(this.items as any);
      this._list = Object.create(this.list);
      this.handleSearch('');
      setTimeout(() => {
        this.getOnlineUserCount();
      }, 2000);

      /**
       * 每分钟触发刷新
       */
      this.getOnlineUserCount();
      this.timer = setInterval(() => {
        this.getOnlineUserCount();
      }, 60 * 1000) as any;
    },
    methods: {
      /** 获取在线人数 */
      getOnlineUserCount(): void {
        this.userSer.getOnlineUserCount().then((num) => {
          if (num) {
            this.onlineUserCount = num;
          }
        });
      },
      scan(obj: any[]): void {
        console.log(obj);

        for (let item of obj) {
          if (this.isGranted(item.meta.permission as string) || !item.meta.permission) {
            if (item?.children == undefined) {
              this.list.push(item);
            } else if (item?.children && item?.children.length > 0) {
              this.scan(item.children);
            }
          }
        }
      },
      /** 搜索 */
      handleSearch(value = ''): void {
        console.log(value, this._list);

        let query = value;
        this.list = [];
        this.fetching = true;
        const _result = this._list.filter((o) => {
          let result = false;
          if (o.type === 'Group') {
            return result;
          }
          if (o.title) {
            result = o.title.includes(query);
          }
          if (!result && o.code) {
            result = o.code.includes(query);
          }
          return result;
        });
        const data = _result.map((route) => ({
          label: route.title,
          value: route.path,
        }));
        setTimeout(() => {
          this.fetching = false;
          this.list = data;
        }, 150);
      },
      /** 跳转到对应路由 */
      onSelect(event: any): void {
        if (!event) {
          return;
        }
        this.selectedValue = null;
        this.handleSearch('');
        this.router.push(event);
      },
      /**跳转到在线用户列表 */
      goUserOnLine() {
        setTimeout(() => {
          this.$router.push({
            path: '/system2/user-online-news',
          });
        }, 300);
      },
    },
  });
</script>

<style lang="less" scoped>
  .OnlineUserCount {
    padding: 10px 24px 0 24px;
    color: #888c9f;
    border-top: 1px solid #214868;
    background: #001529;
  }

  .highLight {
    color: #14db98;
  }

  .menu-search-box {
    background: #001529;
    padding: 8px 16px;
  }

  .menu-search {
    width: 100%;
    background: #092948;
  }

  .anticon-close-circle {
    background: #092948;
  }

  :deep(.ant-select-clear) {
    background: transparent;
    color: #fff;
  }

  :deep(.ant-select-selector) {
    background: #092948 !important;
    border: none !important;
    color: #fff;
  }

  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border: none;
    background: #095188;
    color: #fff;
  }

  .ant-select-arrow {
    background: transparent;
    color: #fff;
  }

  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: #007bff;
  }
  :deep(.ant-select-arrow) {
    color: #bfbfbf;
  }
  :deep(.renyuan) {
    height: 20px;
  }
  :deep(.zhijainzi) {
    cursor: context-menu;
    padding: 0 5px;
  }
</style>
